<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head profile="http://gmpg.org/xfn/11">

	<title>Accordion v1.0 Demo</title>

	<!-- Meta Tags -->
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="accordion, javascript accordion, scriptaculous" />
	<meta name="description" content="The ultimate modal window system, LightWindow, allows you to build your own theem, create mixed media galleries including flash, quictkime and images.   Through a variety of parameters this system can do it all and recreate any other system out there!" />

	<meta name="robots" content="index, follow" />
	
	<!-- JavaScript -->
  <!-- <script type="text/javascript" src="combine.php?type=javascript&files=prototype.js,effects.js,accordion.js,code_highlighter.js,javascript.js,html.js"></script> -->

	<script type="text/javascript" src="javascript/prototype.js"></script>
	<script type="text/javascript" src="javascript/effects.js"></script>
	<script type="text/javascript" src="javascript/accordion.js"></script>
	<script type="text/javascript" src="javascript/code_highlighter.js"></script>
	<script type="text/javascript" src="javascript/javascript.js"></script>
	<script type="text/javascript" src="javascript/html.js"></script>

	<!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/default.css" />
    
	<script type="text/javascript">
			
		//
		//  In my case I want to load them onload, this is how you do it!
		// 
		Event.observe(window, 'load', loadAccordions, false);
	
		//
		//	Set up all accordions
		//
		function loadAccordions() {
			var topAccordion = new accordion('horizontal_container', {
				classNames : {
					toggle : 'horizontal_accordion_toggle',
					toggleActive : 'horizontal_accordion_toggle_active',
					content : 'horizontal_accordion_content'
				},
				defaultSize : {
					width : 525
				},
				direction : 'horizontal'
			});
			
			var bottomAccordion = new accordion('vertical_container');
			
			var nestedVerticalAccordion = new accordion('vertical_nested_container', {
			  classNames : {
					toggle : 'vertical_accordion_toggle',
					toggleActive : 'vertical_accordion_toggle_active',
					content : 'vertical_accordion_content'
				}
			});
			
			// Open first one
			bottomAccordion.activate($$('#vertical_container .accordion_toggle')[0]);
			
			// Open second one
			topAccordion.activate($$('#horizontal_container .horizontal_accordion_toggle')[2]);
		}
		
	</script>
	
	<!-- CSS -->
	<style type="text/css" >
		
		/*
			Vertical Accordions
		*/
		
		.accordion_toggle {
			display: block;
			height: 30px;
			width: 680px;
			background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a;
			padding: 0 10px 0 10px;
			line-height: 30px;
			color: #ffffff;
			font-weight: normal;
			text-decoration: none;
			outline: none;
			font-size: 12px;
			color: #000000;
			border-bottom: 1px solid #cde99f;
			cursor: pointer;
			margin: 0 0 0 0;
		}
		
		.accordion_toggle_active {
			background: url(images/accordion_toggle_active.jpg) no-repeat top right #e0542f;
			color: #ffffff;
			border-bottom: 1px solid #f68263;
		}
		
		.accordion_content {
			background-color: #ffffff;
			color: #444444;
			overflow: hidden;
		}
			
			.accordion_content h2 {
				margin: 15px 0 5px 10px;
				color: #0099FF;
			}
			
			.accordion_content p {
				line-height: 150%;
				padding: 5px 10px 15px 10px;
			}
			
		.vertical_accordion_toggle {
			display: block;
			height: 30px;
			width: 600px;
			background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a;
			padding: 0 10px 0 10px;
			line-height: 30px;
			color: #ffffff;
			font-weight: normal;
			text-decoration: none;
			outline: none;
			font-size: 12px;
			color: #000000;
			border-bottom: 1px solid #cde99f;
			cursor: pointer;
			margin: 0 0 0 0;
		}

		.vertical_accordion_toggle_active {
			background: url(images/accordion_toggle_active.jpg) no-repeat top right #e0542f;
			color: #ffffff;
			border-bottom: 1px solid #f68263;
		}

		.vertical_accordion_content {
			background-color: #ffffff;
			color: #444444;
			overflow: hidden;
		}

			.vertical_accordion_content h2 {
				margin: 15px 0 5px 10px;
				color: #0099FF;
			}

			.vertical_accordion_content p {
				line-height: 150%;
				padding: 5px 10px 15px 10px;
			}
  			
		/*
			Horizontal Accordion
		*/
		
		.horizontal_accordion_toggle {
			/* REQUIRED */
			float: left;	/* This make sure it stays horizontal */
			/* REQUIRED */

			display: block;
			height: 100px;
			width: 30px;
			background: url(images/h_accordion_toggle.jpg) no-repeat top left #a9d06a;
			color: #ffffff;
			text-decoration: none;
			outline: none;
			border-right: 1px solid #cde99f;
			cursor: pointer;
			margin: 0 0 0 0;
		}
		
		.horizontal_accordion_toggle_active {
			background: url(images/h_accordion_toggle_active.jpg) no-repeat top left #e0542f;
			border-right: 1px solid #f68263;
		}
		
		.horizontal_accordion_content {
			/* REQUIRED */
			height: 100px;	/* We need to define a height for the accordion as it stretches the width */
			float: left;	/* This make sure it stays horizontal */
			/* REQUIRED */
			
			overflow: hidden;
			background-color: #ffffff;
			color: #444444;
		}
			
			.horizontal_accordion_content p {
				width: 450px;
				line-height: 150%;
				padding: 5px 10px 15px 10px;
			}
					
					
    /* Container styling*/
    #horizontal_container {
      margin: 20px auto 20px auto;
      width: 680px;   
      height: 100px;    
    }
    
    #vertical_nested_container {
      margin: 20px auto 20px auto;
      width: 620px;
    }

	</style>


</head>

<body>



<div id="container">
		
    <h1><span>Accordion</span> v2.0</h1>
    
    <p class="description" >Finally a lightweight accordion that is built with scriptaculous and works properly in every browser.</p>
        
	<div id="vertical_container" >

   	<h1 class="accordion_toggle">Changelog</h1>
		<div class="accordion_content">   
      <h2>What's new in v2.0?</h2>
      <p>Well i listened to all you guys out there in my forum and my blog and now all those wishes have been granted!</p>
      <p>
        <ul style="margin: 0 0 0 50px;">
          <li>Open/Close functionality added (Click on an active accordion).</li>
          <li>Nested Vertical Accordions</li>
          <li>Accordions will dynamically resize on content added REAL TIME!</li>
          <li>...lots of bug fixes!</li>
        </ul>
      </p>
    </div>
    
		<h1 class="accordion_toggle">Donate! Help me get a MacBook Pro</h1>
		<div class="accordion_content">

			<img src="images/macbook.png" align="left" style="padding: 10px 10px 0 10px;" />
              
            <h2>Help me get a MacBook Pro!</h2>
            <p>
				Hello everyone, I have now released my accordion script and its better than any other one out there!   That's right I said it.   I will be releasing a few more of my scripts in the weeks to come.   In the meantime though help me get a MacBook Pro so I have a mac to test on!   Anything you could throw my way would be appreciated, I will also give back in my <a href="http://forum.stickmanlabs.com">forums</a>, so no worries, I give back even more!
			</p>

			<p>&nbsp;</p>
			
            <div align="center" style="width: 50%; float: left;" >
                <strong>$5 donation</strong>
                <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                <input type="hidden" name="cmd" value="_s-xclick">
                <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but21.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
                <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
                <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
                ">
                </form>          
            </div>

            <div align="center" style="width: 50%; float: left;" >
                <strong>Specify your own donation</strong>
                <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                <input type="hidden" name="cmd" value="_s-xclick">
                <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but21.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
                <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
                <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----MIIHoAYJKoZIhvcNAQcEoIIHkTCCB40CAQExggEwMIIBLAIBADCBlDCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20CAQAwDQYJKoZIhvcNAQEBBQAEgYCyJmAk2xflJwoKVg7hnjZ5MwjF+wu23eNxZMQl0nxGCS0U2gy79haxhbfwSJEQqvQMl/E3EEaoHUc+HT50VBs2y+Kcd/snaaDtrtRMiPvGRoIP53cFWBGFti6jDh0OvogCXY/WgUnDh2nlqgJVVR+4vn5WwDA4ZPhmHShPBfurCTELMAkGBSsOAwIaBQAwggEcBgkqhkiG9w0BBwEwFAYIKoZIhvcNAwcECEy0dRGl64MTgIH49Px9kpwHbKzF1NbSVUtUt4woz3pE8DZyQMj8651S7bmj0AbcU9hx5NHw9Zw0SS42gZetUVV5MsczK3TOOOL9H0BzJA3p6s5lJSuBhJW+IB1HRqPioOpUGOsRRFQqt9sIE1hdi8ceZslyjZcc37qNddi3/hiAYCus1VedhlGA4uIYoN2nr7aPEGx5jRemghM1P/kpPeG15w84rZuf/5NlRBN82bJdlFjRaAKWEFfMN3osm4yWowWqd+rApYP6HqGi9t+tHL287yMvWghbK3BX8zbtAMyi7wsGKZrPrk+US+3wFeIFEvuNCpJJA2L0R2hg91c1n4eCJLWgggOHMIIDgzCCAuygAwIBAgIBADANBgkqhkiG9w0BAQUFADCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20wHhcNMDQwMjEzMTAxMzE1WhcNMzUwMjEzMTAxMzE1WjCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20wgZ8wDQYJKoZIhvcNAQEBBQADgY0AMIGJAoGBAMFHTt38RMxLXJyO2SmS+Ndl72T7oKJ4u4uw+6awntALWh03PewmIJuzbALScsTS4sZoS1fKciBGoh11gIfHzylvkdNe/hJl66/RGqrj5rFb08sAABNTzDTiqqNpJeBsYs/c2aiGozptX2RlnBktH+SUNpAajW724Nv2Wvhif6sFAgMBAAGjge4wgeswHQYDVR0OBBYEFJaffLvGbxe9WT9S1wob7BDWZJRrMIG7BgNVHSMEgbMwgbCAFJaffLvGbxe9WT9S1wob7BDWZJRroYGUpIGRMIGOMQswCQYDVQQGEwJVUzELMAkGA1UECBMCQ0ExFjAUBgNVBAcTDU1vdW50YWluIFZpZXcxFDASBgNVBAoTC1BheVBhbCBJbmMuMRMwEQYDVQQLFApsaXZlX2NlcnRzMREwDwYDVQQDFAhsaXZlX2FwaTEcMBoGCSqGSIb3DQEJARYNcmVAcGF5cGFsLmNvbYIBADAMBgNVHRMEBTADAQH/MA0GCSqGSIb3DQEBBQUAA4GBAIFfOlaagFrl71+jq6OKidbWFSE+Q4FqROvdgIONth+8kSK//Y/4ihuE4Ymvzn5ceE3S/iBSQQMjyvb+s2TWbQYDwcp129OPIbD9epdr4tJOUNiSojw7BHwYRiPh58S1xGlFgHFXwrEBb3dgNbMUa+u4qectsMAXpVHnD9wIyfmHMYIBmjCCAZYCAQEwgZQwgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tAgEAMAkGBSsOAwIaBQCgXTAYBgkqhkiG9w0BCQMxCwYJKoZIhvcNAQcBMBwGCSqGSIb3DQEJBTEPFw0wNzA3MTAxNTA0NDZaMCMGCSqGSIb3DQEJBDEWBBTL3wsgOVSfB31xagTmQA64oZQ8yzANBgkqhkiG9w0BAQEFAASBgC0v1rMVv4vzlC2WNKwr/WoRUGudLRqw0KAXCUujqSYywOBpX61Qx7rAyXQqnC8gbHVgnq+HeyfXu/F/lMUvj3UBIHeIL4f3xzU3lwsbPUSDUsl8iajZv0Ui3NjJrHoFoTEH1roxSS0ZQFENdFmjzBeENtYM92bT6pQ4kVFPLlge-----END PKCS7-----
                ">
                </form>   
            </div>
            
            <p>&nbsp;</p>
		</div>
		
		<h1 class="accordion_toggle">Why another Accordion?</h1>
		<div class="accordion_content">
        	<h2>Uhm... There wasn't one, well not a good one.</h2>
            <p>
         		Haha!   Like there was one.   Well there was, but only for <a href="http://openrico.org/demos?demo=accordion" >Rico</a> and a bloated one by <a href="http://moofx.mad4milk.net/">mootools</a>, that's right I said bloated, live with it.   For some reason there wasn't one for <a href="http://script.aculo.us/">scriptaculous</a> but now there is.   The why is pretty simple, just like every other library, I had a need for it.   Hope you can get some use out of it.   	
            </p>
            
            <p>
            	Oh, by the way, not only does this script handle <strong>vertical</strong> accordions, but <strong>horizontal</strong> as well!
            </p>
		</div>

		<h1 class="accordion_toggle">A Horizontal Accordion! (Nested)</h1>
		<div class="accordion_content">
			
            <h2>Oh yeah, just a few options... BAM Horizontal!</h2>

            <div id="horizontal_container" >
            
                <h3 class="horizontal_accordion_toggle"></h3>
                <div class="horizontal_accordion_content">
                    <p>
                        Integer commodo nibh sit amet odio. Pellentesque semper. Integer dolor. Donec scelerisque sapien placerat velit. 
                    </p>  	
                </div>
                
                <h3 class="horizontal_accordion_toggle"></h3>
                <div class="horizontal_accordion_content">
                    <p>
                        Sed at pede vitae turpis porta condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Morbi erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
                    </p>   	
                </div>
        
                <h3 class="horizontal_accordion_toggle"></h3>
                <div class="horizontal_accordion_content">
                    <p>
                        Curabitur quam lorem, laoreet molestie, eleifend id, pulvinar vel, nunc. Proin congue felis quis purus. Aenean porttitor, lacus vel bibendum pulvinar, leo nulla suscipit leo, nec lobortis orci diam eget turpis. Sed eu eros et orci consectetuer molestie. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                    </p>  	
                </div>
                
                <h3 class="horizontal_accordion_toggle"></h3>
                <div class="horizontal_accordion_content">
                    <p>
                        Sed at pede vitae turpis porta condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Morbi erat.
                    </p>   	
                </div>
        
                <h3 class="horizontal_accordion_toggle"></h3>
                <div class="horizontal_accordion_content">
                    <p>
                        Integer commodo nibh sit amet odio. Pellentesque semper. Integer dolor. Donec scelerisque sapien placerat velit. Nulla suscipit, elit quis pretium hendrerit, nisi sapien lobortis libero, et consectetuer lorem sapien id urna. 
                    </p> 	
                </div>
                    
            </div>
    
   	</div>
   	
		<h1 class="accordion_toggle">A Vertical Nested Accordion!</h1>
		<div class="accordion_content">

            <div id="vertical_nested_container" >
            
                <h3 class="vertical_accordion_toggle">Hablo pig-latin?</h3>
                <div class="vertical_accordion_content">
                    <p>
                        Integer commodo nibh sit amet odio. Pellentesque semper. Integer dolor. Donec scelerisque sapien placerat velit. 
                    </p>  	
                </div>
                
                <h3 class="vertical_accordion_toggle">Isn't this kewl?'</h3>
                <div class="vertical_accordion_content">
                    <p>
                        Sed at pede vitae turpis porta condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Morbi erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
                    </p>   	
                </div>
        
                <h3 class="vertical_accordion_toggle">Click me!</h3>
                <div class="vertical_accordion_content">
                    <p>
                        Curabitur quam lorem, laoreet molestie, eleifend id, pulvinar vel, nunc. Proin congue felis quis purus. Aenean porttitor, lacus vel bibendum pulvinar, leo nulla suscipit leo, nec lobortis orci diam eget turpis. Sed eu eros et orci consectetuer molestie. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                    </p>  	
                </div>
                
                <h3 class="vertical_accordion_toggle">Don't you dare....'</h3>
                <div class="vertical_accordion_content">
                    <p>
                        Sed at pede vitae turpis porta condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Morbi erat.
                    </p>   	
                </div>
        
                <h3 class="vertical_accordion_toggle">Your Mom!</h3>
                <div class="vertical_accordion_content">
                    <p>
                        Integer commodo nibh sit amet odio. Pellentesque semper. Integer dolor. Donec scelerisque sapien placerat velit. Nulla suscipit, elit quis pretium hendrerit, nisi sapien lobortis libero, et consectetuer lorem sapien id urna. 
                    </p> 	
                </div>
                    
            </div>
    
   	</div>
   	
		
		<h1 class="accordion_toggle">Download the code!</h1>
		<div class="accordion_content">
            <h2>Download</h2>
            <p>
				Get it here <a href="accordion.zip">accordion v1.0</a>            	
            </p>
            
            <p>Oh and... help me with a MacBook Pro?</p>
			
            <div align="center" style="width: 50%; float: left;" >
                <strong>$5 donation</strong>
                <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                <input type="hidden" name="cmd" value="_s-xclick">
                <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but21.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
                <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
                <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
                ">
                </form>          
            </div>

            <div align="center" style="width: 50%; float: left;" >
                <strong>Specify your own donation</strong>
                <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                <input type="hidden" name="cmd" value="_s-xclick">
                <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but21.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
                <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
                <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
                ">
                </form>   
            </div>            
        </div>
        
		<h1 class="accordion_toggle">How to Use</h1>
		<div class="accordion_content">
        
			<h2>Include the files</h2>
            <p>
            	You need to include accordion.js but it requires prototype.js and effects.js (like I said this is for scriptaculous!).   As long as you are using at least the latest stable builds you are fine.
<pre><code class="html">&lt;script type="text/javascript" src="javascript/prototype.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="javascript/effects.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="javascript/accordion.js"&gt;&lt;/script&gt;</code></pre>           
            <h2>The Markup</h2>
            <p>
				Pretty much anything will work, so its really up to you.   The presentation is up to you (see the source of this page for some examples).   Ideally you should probably use header tags with div's containing the content as this would be best symantically speaking and for seo.   Below is a basic example.
            </p> 
            <pre><code class="html">&lt;h2 class="accordion_toggle"&gt;Title Bar&lt;/h2&gt;
&lt;div class="accordion_content"&gt;...&lt;/div&gt;
...
...
...
&lt;h2 class="accordion_toggle"&gt;Title Bar&lt;/h2&gt;
&lt;div class="accordion_content"&gt;...&lt;/div&gt;</code></pre>   
			<p>
            	The important thing here is that it need to be the title element then the content element and so on, nothing in between, just like every other accordion.
            </p>

            <h2>The Options</h2>
            <p>
		Not many options, but all you need to make this thing do anything you may require!
            </p> 
            <pre><code class="javascript">// The speed of the accordion
resizeSpeed : 8,
// The classnames to look for
classNames : {
	// The standard class for the title bar
    toggle : 'accordion_toggle',
    // The class used for the active state of the title bar
    toggleActive : 'accordion_toggle_active',
    // The class used to find the content
    content : 'accordion_content'
},
// If you don't want the accordion to stretch to fit 
// its content, set a value here, handy for horixontal examples.
defaultSize : {
    height : null,
    width : null
},
// The direction of the accordion
direction : 'vertical',
// Should the accordion activate on click or say on mouseover? (apple.com)
onEvent : 'click'</code></pre>  
                
			<p>
            	Now these are the default options set automatically, so let's now take a look on how to create an accordion and change those options.
            </p>
            
            <h2>The Javascript</h2>
            
            <p>
            	Below is how I created the two accordions you see on this page, one vertical, one horizontal with a specified width.
            </p>
            
            <pre><code class="javascript">// General Syntax
new accordion('container-selector', options);

// Horizontal example
var horizontalAccordion = new accordion('#top_container', {
    classNames : {
        toggle : 'horizontal_accordion_toggle',
        toggleActive : 'horizontal_accordion_toggle_active',
        content : 'horizontal_accordion_content'
    },
    defaultSize : {
        width : 525
    },
    direction : 'horizontal'
});

// Vertical Accordion
var verticalAccordion = new accordion('#bottom_container');</code></pre>            
            
         	<p>
            	Ok, so now we know how to do the markup, hopefully you got creative with the css and looked at the source of this page to get started, and not you know how make an accordion.   What if you want to use javascript to open a slide on load or at any time... here is how.
          	</p>
             <pre><code class="javascript">// Let's create it
var verticalAccordion = new accordion('#bottom_container');

// Now lets open the first slide
verticalAccordion.activate($$('#bottom_container .accordion_toggle')[0]);
</code></pre>   

			<p>
            	So we use the selector method from prototype to get the first title bar from the container+classname and we want the first one so we use [0].   Couldn't be easier!
            </p>    
      <h2>Preload</h2>
      <p>So let's say you want all your accordions closed on page load but don't want the nasty flash and don't want to sacrifice accessibility. </p>
      <pre><code class="javascript">// Special thanks go out to Will Shaver @ http://primedigit.com/
var verticalAccordions = $$('.accordion_toggle');
verticalAccordions.each(function(accordion) {
    $(accordion.next(0)).setStyle({
        height: '0px'
    });
});
</code></pre>
            
		</div>

        					
	</div>

	<div class="page-footer">
		<p>&copy; Copyright 2007 <a href="http://www.stickmanlabs.com"><small>stickmanlabs</small></a></p>
		<p>Accordion is freely distributable under the terms of an MIT-style license.</p>

	</div>
	
</div>

<script type="text/javascript" >
  
	//
	// You can hide the accordions on page load like this, it maintains accessibility
	//
	// Special thanks go out to Will Shaver @ http://primedigit.com/
	//
	var verticalAccordions = $$('.accordion_toggle');
	verticalAccordions.each(function(accordion) {
		$(accordion.next(0)).setStyle({
		  height: '0px'
		});
	});

	
</script>
	
<script type="text/javascript" src="http://www.google-analytics.com/urchin.js"></script>
<script type="text/javascript">_uacct = "UA-624845-2";urchinTracker();</script>

	
</body>
</html>
